<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>电商后台管理</title>

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

  <link rel="stylesheet" href="/stylesheets/font-awesome.min.css">

  <link rel="stylesheet" href="/stylesheets/ionicons.min.css">

  <link rel="stylesheet" href="/stylesheets/AdminLTE.min.css">

  <link rel="stylesheet" href="/stylesheets/skin-blue.min.css">


</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">


  <!-- header -->
  <%- include("./header.ejs") %>

  <!-- 侧边导航栏 -->
  <%- include("./sidbar.ejs") %>
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        商品管理
        <small>
          <a href="/pro/Add" class="btn btn-success btn-sm">添加商品</a>
          <a href="/pro/upload" class="btn btn-success btn-sm">导入信息</a>
        </small>
      </h1>
    </section>
    
    <!-- Main content -->
    <section class="content container-fluid">

      <div class="box-body table-responsive no-padding">
        <table class="table table-hover">
          <tbody>
            <tr>
              <th style="width: 60px;">编号</th>
              <th style="width: 120px;text-align: center;">名称</th>
              <th style="width: 120px;">分类</th>
              <th style="width: 60px;">品牌</th>
              <th style="width: 60px;">LOGO</th>
              <th style="width: 120px;">产品图片</th>
              <th style="width: 120px;">产品价格</th>
              <th style="width: 400px;text-align: center;">产品描述</th>
              <th style="width: 70px;">库存</th>
              <th style="width: 70px;">销量</th>
              <th style="width: 70px;">折扣</th>
              <th style="width: 70px;">评分</th>
              <th style="width: 130px;">操作</th>
            </tr>
            <style>
              td,th{
                line-height: 20px !important;
                width: 80px;
                
                display: inline-block;
              }
              tr{
                height: 50px !important;
                display: block;
                overflow: hidden;
              }
            </style>
            <% for(var i = 0;i<data.length;i++){ %>
              <tr">
              
                <td style="width: 60px;"><%= pageIndex*num + i+1 %></td>
                <td style="width: 120px;"><%= data[i].proName %></td>
                <td style="width: 120px;"><%= data[i].column %></td>
                <td style="width: 60px;"><%= data[i].brand %></td>
                <td style="width: 60px;"><img width="40px" src="<%= data[i].logo %>" alt=""></td>
                <td style="width: 120px;"><img width="40px" src="<%= data[i].proImg %>" alt=""></td>
                <td style="width: 120px;"><%= data[i].price %></td>
                <td style="width: 400px;"><%= data[i].introduce %></td>
                <td style="width: 70px;"><%= data[i].stock %></td>
                <td style="width: 70px;"><%= data[i].sales %></td>
                <td style="width: 70px;"><%= data[i].discount %></td>
                <td style="width: 70px;"><%= data[i].score %></td>
                <td style="width: 130px;">
                  <a href="/pro/update?id=<%= data[i].proId %>" class="btn btn-primary btn-sm">修改</a>
                  <a href="/pro/delete?id=<%= data[i].proId %>" class="btn btn-danger btn-sm">删除</a>
                </td>
              </tr>
            <% } %>
            
            
          </tbody>
          
        </table>
      </div>
      <div class="box-footer clearfix">
        <ul class="pagination pagination-sm no-margin pull-right">
          <li><a onclick="prev()">«</a></li>
          <% for(let i=0;i<maxPage;i++){ %>
            <li class="<%= pageIndex === i ? 'active' : '' %>"><a href="/pro/page?index=<%= i %>&num=10"><%= i+1 %></a></li>
          <% } %>
          <li><a onclick="next()">»</a></li>
        </ul>
      </div>
      <script>
        var oul = document.querySelector(".pagination");
        var ali = oul.children;
        var oa = document.querySelector(".pagination .active");
        var index = parseInt(oa.children[0].innerHTML) - 1;
        function prev(){
          if(index == 0){
            location.href=`http://localhost:3000/pro/page?index=${index}&num=10`;
          }else{
            index--;
            location.href=`http://localhost:3000/pro/page?index=${index}&num=10`;
          } 
        }
        function next(){
          if( index == ali.length - 3){
            location.href=`http://localhost:3000/pro/page?index=${index}&num=10`;
          }else{
            index++;
            location.href=`http://localhost:3000/pro/page?index=${index}&num=10`;
          }
        }
      </script>
        
      </section>
      <!-- /.content -->
    </div>
  <!-- /.content-wrapper -->
  
  <%- include("./footer.ejs") %>

  
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane active" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:;">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:;">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="pull-right-container">
                    <span class="label label-danger pull-right">70%</span>
                  </span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="/javascripts/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/javascripts/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/javascripts/adminlte.min.js"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
</html>